import {INPUT_TYPE_ENUM} from '~/component/SearchForm/dateRanges';

export const COLORS = [
    '#FF6C01',
    '#2FC25B',
    '#516b91',
    '#59c4e6',
    '#edafda',
    '#93b7e3',
    '#a5e7f0',
    '#cbb0e3'
];

/**
 * 折线图数据处理
 *
 * @param {data} array 数据
 * @return {options} {返回配置}
 */
export const lineOptions = (data, period, selected = {}) => {
    let xAxisData = [];
    const series = [];
    const legendData = data.map(e => e.name).filter(item => item !== '');

    if (data.length) {
        const len = data[0].point.length;
        for (let j = 0; j < len; j++) {
            xAxisData.push(data[0].point[j].xAixs);
        }
        xAxisData = xAxisData.reverse();
        xAxisData = xAxisData.map(item => {
            if (item && period === INPUT_TYPE_ENUM.HOUR) {
                item = `${item.slice(4, 6)}-${item.slice(6, 8)} ${item.slice(8, 10)}:00`;
            }
            return item;
        });
    }

    // 处理x轴数据series： { name: '', type: 'line', smooth: true, data: [] }
    const seriesItem = {type: 'line'};
    const datas = data.map(({...a}) => ({...a}));
    if (period === INPUT_TYPE_ENUM.HOUR) {
        datas.forEach(ele => {
            ele.point = ele.point.map(({xAixs, ...a}) =>
                ({xAixs: `${xAixs.slice(4, 6)}-${xAixs.slice(6, 8)} ${xAixs.slice(8, 10)}:00`, ...a}));
        });
    }
    for (let i = 0; i < datas.length; i++) {
        const item = {...seriesItem};
        item.name = datas[i].name;
        item.data = [];
        for (let j = 0; j < xAxisData.length; j++) {
            const dataIndex = datas[i].point.findIndex(item => item.xAixs === xAxisData[j]);
            if (dataIndex > -1) {
                item.data[j] = parseFloat(datas[i].point[dataIndex].value);
            }
            else {
                item.data[j] = 0;
            }
        }
        series.push(item);
    }

    const option = {
        color: COLORS,
        grid: {left: 35, right: 40, bottom: 66, top: 30, containLabel: true},
        legend: {
            type: 'scroll',
            left: 'center',
            bottom: 36,
            selectedMode: 'multiple',
            selected,
            data: legendData
        },
        tooltip: {
            trigger: 'axis',
            extraCssText: 'max-height: 300px; overflow-y: scroll;'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLabel: {
                fontSize: 10,
                color: 'rgba(0, 0, 0, .65)'
            },
            axisPointer: {
                snap: true,
                handle: {
                    show: true,
                    size: [0, 0]
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#e9e9e9'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#e9e9e9'
                }
            }
        },
        yAxis: {
            type: 'value', splitNumber: 10,
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dotted'
                }
            },
            axisLabel: {
                fontSize: 10,
                color: 'rgba(0, 0, 0, .65)'
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        series: []
    };

    option.xAxis.data = xAxisData;
    option.series = series;
    return {...option};
};
